{% extends "base.html" %}

{% block content %}
<div class="page-title">
    <h3>在下方输入要修改的客户的编号：</h3>
</div>
<div class="form-container">
    <form id="modify-supplier-form">
        <label for="customer_id">客户编号（此项仅作查找之用，若想修改本项请在下方进行）：</label>
        <input type="text" id="customer_id" name="customer_id" class="input-field" required><br>
        <button type="button" class="login-button" id="search-button">查找</button>
        <div id="modify-fields" style="display:none;">
            <label for="customer_name">客户名称：</label>
            <input type="text" id="customer_name" name="customer_name" class="input-field" required><br>
            <label for="customer_short_name">客户简称：</label>
            <input type="text" id="customer_short_name" name="customer_short_name" class="input-field"><br>
            <label for="address">地址：</label>
            <input type="text" id="address" name="address" class="input-field"><br>
            <label for="company_phone">公司电话：</label>
            <input type="text" id="company_phone" name="company_phone" class="input-field"><br>
            <label for="email">邮件：</label>
            <input type="email" id="email" name="email" class="input-field"><br>
            <label for="contact_person">联系人：</label>
            <input type="text" id="contact_person" name="contact_person" class="input-field"><br>
            <label for="contact_phone">联系人电话：</label>
            <input type="text" id="contact_phone" name="contact_phone" class="input-field"><br>
            <label for="remarks">备注：</label>
            <textarea id="remarks" name="remarks" class="input-field"></textarea><br>
            <label for="new_customer_id">新的客户编号（此项为空则保持原客户编号不变）：</label>
            <input type="text" id="new_customer_id" name="new_customer_id" class="input-field"><br>
            <div class="button-container">
                <button type="submit" class="login-button">保存</button>
                <button type="reset" class="login-button" style="background-color: grey;">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    document.getElementById('search-button').addEventListener('click', function() {
        var customerId = document.getElementById('customer_id').value;
        if (customerId) {
            fetch(`/api/suppliers/${customerId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert('该客户编号不存在');
                        document.getElementById('modify-fields').style.display = 'none';
                    } else {
                        document.getElementById('customer_name').value = data.客户名称;
                        document.getElementById('customer_short_name').value = data.客户简称;
                        document.getElementById('address').value = data.地址;
                        document.getElementById('company_phone').value = data.公司电话;
                        document.getElementById('email').value = data.邮件;
                        document.getElementById('contact_person').value = data.联系人;
                        document.getElementById('contact_phone').value = data.联系人电话;
                        document.getElementById('remarks').value = data.备注;
                        document.getElementById('modify-fields').style.display = 'block';
                    }
                }).catch(error => {
                    console.error('Error:', error);
                    alert('查找客户失败');
                });
        } else {
            alert('请输入客户编号');
            document.getElementById('modify-fields').style.display = 'none';
        }
    });

    document.getElementById('modify-supplier-form').addEventListener('submit', function(event) {
        event.preventDefault();

        var customerId = document.getElementById('customer_id').value;
        var newCustomerId = document.getElementById('new_customer_id').value;
        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        if (newCustomerId && newCustomerId !== customerId) {
            if (!confirm('此次修改涉及客户编号，是否确认修改？')) {
                return;
            }
            data.new_customer_id = newCustomerId;
        }

        fetch(`/api/suppliers/${customerId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        }).then(response => {
            if (response.ok) {
                alert('客户修改成功');
                this.reset();
                document.getElementById('modify-fields').style.display = 'none';
            } else {
                response.json().then(data => {
                    alert('修改客户失败: ' + data.error);
                });
            }
        }).catch(error => {
            console.error('Error:', error);
            alert('修改客户失败');
        });
    });
</script>
{% endblock %}
